<template>
  <div>
    <el-menu
      :default-active="$route.path"
      :collapse="collapsed"
      collapse-transition
      router
      class="el-menu-demo"
      mode="horizontal"
      background-color="#409EFF"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
        <template slot="title">{{menu.menuname}}</template>
        <el-menu-item-group>
          <el-menu-item
            v-for="chmenu in menu.menus"
            :index="'/'+chmenu.url"
            :key="chmenu.menuid"
          >{{chmenu.menuname}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="10" class="submenu">
        <template slot="title">{{userInfo.userAccount}}</template>
        <el-menu-item @click="content()" index="10-2">个人中心</el-menu-item>
        <el-menu-item @click="exit()" index="10-3">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    <el-drawer size="30%" title="修改个人信息" :visible.sync="drawer" direction="rtl">
      <el-form label-width="80px" :model="userInfo">
        <!-- <el-form-item label="头像">
          <el-upload
            list-type="picture-card"
            action="/img/ngUploadImg"
            :file-list="imageList"
            :auto-upload="false"
            :on-change="importExcel"
            :on-remove="fileRemove"
            :limit="1"
            multiple
            accept=".jpg, .jpeg, .png"
          >
            <img v-if="urlData" :src="urlData" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>-->
        <el-form-item label="头像">
          <el-upload
            list-type="picture-card"
            action="/img/ngUploadImg"
            :auto-upload="false"
            :on-change="importExcel"
            :on-remove="fileRemove"
            :limit="1"
            :file-list="imageList"
            multiple
            accept=".jpg, .jpeg, .png"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" prop="userAccount">
          <el-input
            size="small"
            v-model="userInfo.userAccount"
            auto-complete="off"
            placeholder="请输入账号"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input
            size="small"
            v-model="userInfo.userPassword"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input size="small" v-model="userInfo.name" auto-complete="off" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input
            size="small"
            v-model="userInfo.telephone"
            auto-complete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="职责" prop="responsibility">
          <el-input
            size="small"
            v-model="userInfo.responsibility"
            auto-complete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input size="small" v-model="userInfo.age" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select size="small" v-model="userInfo.gender" :disabled="true">
            <el-option label="女" value="0"></el-option>
            <el-option label="男" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="float: right;">
        <el-button size="small" @click="closeDialog()">取消</el-button>
        <el-button size="small" type="primary" class="title" @click="update()">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getFileNameFromPath } from "../utils/util";
import { fileUpload } from "../api/file";
import { update } from "../api/xiaofang/userInfo";
export default {
  name: "menuCompoment",
  data() {
    return {
      collapsed: false,
      allmenu: [],
      userInfo: {},
      drawer: false,
      imageList: [],
      urlData: ""
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("sysuser"));
    let res = {};
    console.log("用户信息======", this.userInfo);
    //判断用户是否为管理员
    if (this.userInfo.role == 1) {
      res = {
        success: true,
        data: [
          {
            menuid: 1,
            icon: "li-icon-xiangmuguanli",
            menuname: "系统管理",
            url: "xiaofang/userInfo",
            menus: null,
            menus: [
              {
                menuid: 2,
                icon: "icon-cat-skuQuery",
                menuname: "用户管理",
                hasThird: "N",
                url: "xiaofang/userInfo",
                menus: null
              },
              {
                menuid: 3,
                icon: "icon-cat-skuQuery",
                menuname: "小组管理",
                hasThird: "N",
                url: "xiaofang/group",
                menus: null
              }
            ]
          },
          {
            menuid: 11,
            icon: "li-icon-xiangmuguanli",
            menuname: "设备管理",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 2,
                icon: "icon-cat-skuQuery",
                menuname: "设备管理",
                hasThird: "N",
                url: "xiaofang/device",
                menus: null
              },
              {
                menuid: 4,
                icon: "icon-cat-skuQuery",
                menuname: "设备类别管理",
                hasThird: "N",
                url: "xiaofang/deviceType",
                menus: null
              },
              {
                menuid: 3,
                icon: "icon-cat-skuQuery",
                menuname: "报修管理",
                hasThird: "N",
                url: "xiaofang/repair",
                menus: null
              }
            ]
          },
          {
            menuid: 31,
            icon: "li-icon-xiangmuguanli",
            menuname: "救援中心",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 33,
                icon: "icon-cat-skuQuery",
                menuname: "救援任务",
                hasThird: "N",
                url: "xiaofang/task",
                menus: null
              }
            ]
          },
          {
            menuid: 41,
            icon: "li-icon-xiangmuguanli",
            menuname: "应急管理",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 42,
                icon: "icon-cat-skuQuery",
                menuname: "应急预案管理",
                hasThird: "N",
                url: "xiaofang/plan",
                menus: null
              }
            ]
          }
        ],
        msg: "success"
      };
    } else {
      res = {
        success: true,
        data: [
          {
            menuid: 11,
            icon: "li-icon-xiangmuguanli",
            menuname: "设备管理",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 2,
                icon: "icon-cat-skuQuery",
                menuname: "设备管理",
                hasThird: "N",
                url: "xiaofang/device",
                menus: null
              },
              {
                menuid: 3,
                icon: "icon-cat-skuQuery",
                menuname: "报修管理",
                hasThird: "N",
                url: "xiaofang/repair",
                menus: null
              },
              {
                menuid: 4,
                icon: "icon-cat-skuQuery",
                menuname: "设备类别管理",
                hasThird: "N",
                url: "xiaofang/deviceType",
                menus: null
              }
            ]
          },
          {
            menuid: 31,
            icon: "li-icon-xiangmuguanli",
            menuname: "救援中心",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 33,
                icon: "icon-cat-skuQuery",
                menuname: "救援任务",
                hasThird: "N",
                url: "xiaofang/task",
                menus: null
              }
            ]
          },
          {
            menuid: 41,
            icon: "li-icon-xiangmuguanli",
            menuname: "应急管理",
            url: null,
            menus: null,
            menus: [
              {
                menuid: 42,
                icon: "icon-cat-skuQuery",
                menuname: "应急预案管理",
                hasThird: "N",
                url: "xiaofang/plan",
                menus: null
              }
            ]
          }
        ],
        msg: "success"
      };
    }

    this.allmenu = res.data;
    // 监听
    this.$root.Bus.$on("toggle", value => {
      this.collapsed = !value;
    });
  },
  methods: {
    update() {
      update(this.userInfo).then(res => {
        if (res.status == 200) {
          sessionStorage.setItem("sysuser", JSON.stringify(this.userInfo));
          this.$message({
            type: "success",
            message: "修改成功"
          });
          this.drawer = false;
        }
      });
    },
    fileRemove() {
      this.user.imageList = [];
    },
    importExcel(file) {
      this.urlData = null;
      let formData = new FormData();
      formData.append("multipartFile", file.raw);
      fileUpload(formData).then(res => {
        this.userInfo.picturePath = res.data;
      });
    },
    closeDialog() {
      this.drawer = false;
    },
    content() {
      this.imageList = [];
      let url = {};
      url.name = "user.jpg";
      url.url = this.userInfo.picturePath;
      this.imageList.push(url);
      this.urlData = this.userInfo.picturePath;
      this.drawer = true;
    },
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit("LOGIN_OUT");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!"
            });
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style scoped>
.submenu {
  float: right;
}
.logoimg {
  height: 40px;
  float: left;
}
.logobox {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>